<template>
	<view>
		<view class="mix-product-detail-swiper" v-if="swipertype == 'pro'">
			<swiper class="swiper" circular autoplay interval="5000">
				<swiper-item class="item" v-for="(item, index) in imglist" :key="index" @change="onSwiperChange">
					<view class="image-wrapper">
						<image class="images" :src="item" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- 
		<view class="dots row center">
			<view class="dot" v-for="(item, index) in imglist" :key="index"></view>
		</view>
		-->
		</view>

		<view v-if="swipertype == 'index'">
			<view class="mix-product-index-swiper">
				<swiper class="swipers" circular autoplay interval="5000">
					<swiper-item class="item" v-for="(item, index) in imglist" :key="index" @change="onSwiperChange">
						<view class="image-wrapper">
							<image class="images" :src="item" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="tables"></view>
		</view>
	</view>
</template>

<script>
	/**
	 * 商品详情页 顶部轮播图
	 */
	export default {
		name: 'proswiper',
		data() {
			return {};
		},
		props: {
			imglist: {
				type: Array,
				default () {
					return []
				}
			},
			swipertype: {
				type: String,
				default: 'pro'
			},
		},
		watch: {},
		methods: {
			onSwiperChange(e) {
				this.current = e.detail.current;
				console.log(e)
			},
		}
	}
</script>

<style scoped lang="scss">
	.mix-product-detail-swiper {
		position: relative;
	}

	.swiper {
		width: 100%;
		height: 100vw;
	}

	.image-wrapper {
		flex-shrink: 0;
		width: 100%;
		height: 100vw;
		margin-right: 10vw;
		overflow: hidden;

		.images {
			width: 100%;
			height: 100%;
		}
	}

	.mix-product-index-swiper {
		background-color: $base-color;
		width: 100%;
		height: 30vw;
		border-radius: 0 0 5vw 5vw;
		position: relative;

		.swipers {
			position: absolute;
			top: 14vw;
			width: 100%;
			height: 40vw;
			.images {
				width: 94%;
				margin: 0 3% 0 3%;
				height: 40vw;
				border-radius: 1vw;
			}
		}
	}
	
	.tables{
		height: 25vw; 
		background-color: #FFFFFF;
	}
</style>
